<template>
<div class="app">
			<div class="top">
				<div class="top-1"><div class="top-min">同城</div></div>
				<div class="top-1"><div class="top-min">生活态</div></div>
			</div>
		<div class="top-serach">
			<img src="../img/598414b2a9fcf83571276bfc_1080x130.png"/>
		</div>	
		<div class="top-ban">
			<img src="../img/top-ban.png"/>
		</div>
		<!---->
		<div class="top-banner">
			<div class="top-banner-item">
				<img src="../img/chucan.jpg"/>
			</div>
			<div class="top-banner-item">
				<img src="../img/chucan.jpg"/>
			</div>
			<div class="top-banner-item">
				<img src="../img/chucan.jpg"/>
			</div>
			<div class="top-banner-item">
				<img src="../img/chucan.jpg"/>
			</div>
			<div class="top-banner-item">
				<img src="../img/chucan.jpg"/>
			</div>
			<div class="top-banner-item">
				<img src="../img/chucan.jpg"/>
			</div>
		</div>
		<!---->
		<div class="banner-time">
			<div class="banner-time1"><p>今日优先折扣</p></div>
			<div class="banner-time2"><span class="a">23</span>:<span class="b">23</span>:<span class="c">12</span> <span class="d">3</span></div>
		</div>
		<!---->
		<div class="main">
			<div class="main-item">
				<img src="../img/main.png"/>
				<span class="newprice">￥234</span><span class="oldprice">￥23S</span></br>
				<p>雪花勇闯天涯</p>
			</div>
			<div class="main-item">
				<img src="../img/main.png"/>
				<span class="newprice">￥234</span><span class="oldprice">￥23S</span></br>
				<p>雪花勇闯天涯</p>
			</div>
			<div class="main-item">
				<img src="../img/main.png"/>
				<span class="newprice">￥234</span><span class="oldprice">￥23S</span></br>
				<p>雪花勇闯天涯</p>
			</div>
			<div class="main-item">
				<img src="../img/main.png"/>
				<span class="newprice">￥234</span><span class="oldprice">￥23S</span></br>
				<p>雪花勇闯天涯</p>
			</div>
		</div>
		<div class="asq"></div>
		<div class="main-p"><p>爆款特卖</p></div>
		<!---->
		<div class="main-2">
			<div class="main-2-item"><img src="../img/main-2.png"/></div>
			<div class="main-2-item"><img src="../img/main-2.png"/></div>
		</div>
		<div class="asq"></div>
		<!---->
		<div class="zhuanti"><p>—— 精选专题 ——</p></div>
		<!---->
		<div class="baokuan">
			<img src="../img/baokuan.jpg"/>
		</div>
		<!---->
		<div class="main-3">
			<div class="main-3-item">
				<img src="../img/wan0.jpg"/>
				<span>￥123</span>
				<p>雪花勇闯天涯</p>
			</div>
			<div class="main-3-item">
				<img src="../img/wan0.jpg"/>
				<span>￥123</span>
				<p>雪花勇闯天涯</p>
			</div>
			<div class="main-3-item">
				<img src="../img/wan0.jpg"/>
				<span>￥123</span>
				<p>雪花勇闯天涯</p>
			</div>
			<div class="main-3-item">
				<img src="../img/wan0.jpg"/>
				<span>￥123</span>
				<p>雪花勇闯天涯</p>
			</div>
		</div>
		<!---->
		<div class="canzhuo">
			<img src="../img/canzhuo.png"/>
		</div>
		<div class="asq"></div>
		<!---->
		<div class="main-nav">
			<div class="main-nav-item"><p>生活用品</p></div>
			<div class="main-nav-item"><p>生活用品</p></div>
			<div class="main-nav-item"><p>生活用品</p></div>
			<div class="main-nav-item"><p>生活用品</p></div>
			<div class="main-nav-item"><p>生活用品</p></div>
			<div class="main-nav-item"><p>生活用品</p></div>
			<div class="main-nav-item"><p>生活用品</p></div>
			<div class="main-nav-item"><p>生活用品</p></div>
		</div>
		<div class="main-lest">
			<div class="main-lest-item">
				<img src="../img/lazy.jpg"/>
				<p>雪花勇闯天涯哈哈哈</p>
				<span>￥123</span>
			</div>
			<div class="main-lest-item">
				<img src="../img/lazy.jpg"/>
				<p>雪花勇闯天涯哈哈哈</p>
				<span>￥123</span>
			</div>
			<div class="main-lest-item">
				<img src="../img/lazy.jpg"/>
				<p>雪花勇闯天涯哈哈哈</p>
				<span>￥123</span>
			</div>
			<div class="main-lest-item">
				<img src="../img/lazy.jpg"/>
				<p>雪花勇闯天涯哈哈哈</p>
				<span>￥123</span>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
body{
	font-family:"微软雅黑" ;
	overflow-x: hidden;
}
.top{
	height: 1.078125rem;
	background: RGB(255,255,255);
	/*background: blue;*/
	display: flex;
}
.top-1{
	height: 1.078125rem;
	width: 50%;
	/*background: red;*/
	justify-content: space-around;
}
.top-min{
	width: 1.125rem;
	height: 1.078125rem;
	text-align: center;
	line-height:  1.078125rem;
	border-bottom: 1px solid red;
	margin: auto;
}
.top-serach{
	height: 1.203125rem;
}
.top-serach img{
	width: 100%;
}
.top-ban{
	height: 2.1875rem;
}
.top-ban img{
	width: 100%;
}
/**/
.top-banner{
	height: 6.2rem;
	display: flex;
	flex-wrap: wrap;
	background: RGB(244,244,248);
	/*background: black;*/
}
.top-banner-item{
	width: 3.3328125rem;
	height: 2.986875rem ;
	text-align: center;
}
.top-banner-item ../img{
	width: 3.328125rem;
	height: 2.986875rem ;
}
/**/
.banner-time{
	height: 1.28125rem;
	display: flex;
	flex: start;
	line-height: 1.28125rem;
}
.banner-time1{
	font-size: 0.390625rem;
	margin-left: 0.46875rem;
}
.banner-time2{
	margin-left: 0.3125rem;
}
.banner-time span{
	width: 0.359375rem;
	background: black;
	color: white;
}
.banner-time span:nth-of-type(4){
	background: red;
}
/**/
.main{
	height: 4.890625rem;
	display: flex;
	/*justify-content: space-around;*/
	/*background: RGB(244,244,248);*/
	overflow-x: scroll;
}
.main-item{
	width: 3.453125rem;
	height: 3.4375rem;
	text-align: center;
}
.main-item img{
	width: 3.453125rem;
}
.oldprice{
	font-size: 0.256875rem;
	text-decoration: line-through
}
.newprice{
	color: orangered;
	font-size: 0.375rem;
}
.main-item p{
	font-size: 0.34375rem;
}
.asq{
	height: 0.3125rem;
	background: RGB(244,244,248);
}
/**/
.main-p{
	height: 1.4375rem;
	font-size: 0.421875rem;
	line-height:  1.4375rem;
	margin-left: 0.46875rem;
}
/**/
.main-2{
	height: 5.890625rem;
	display: flex;
	justify-content: space-around;
}
.main-2-item{
	width: 5rem;
	height: 5.890625rem;
}
.main-2 img{
	width: 5rem;
	height: 5.890625rem;
}
.zhuanti{
	height: 1.4375rem;
	font-size: 0.421875rem;
	line-height:  1.4375rem;
	text-align: center;
}
.baokuan{
	height: 4.25rem;
}
.baokuan img{
	width: 100%;
}
.main-3{
	height: 4.890625rem;
	display: flex;
	justify-content: space-around;
}
.main-3-item{
	width: 3.4665625rem;
	height: 4.890625rem;
	text-align: center;
}
.main-3-item img{
	width: 3.4665625rem;
}
.main-3-item span{
	color: red;
}
.main-3-item p{
	margin-top: 0.15625rem;
	font-size: 0.3125rem;
}
/**/
.canzhuo img{
	width: 100%;
}
/**/
.main-nav{
	height: 1.875rem;
	display: flex;
	flex-wrap: wrap;
}
.main-nav-item{
	width: 2.5rem;
	height: 0.933125rem;
	/*margin-left: 0.46875rem;*/
	text-align: center;
	line-height:0.933125rem;
	font-size: 0.3125rem;
}
.main-lest{
	height: 7.09375rem;
	display: flex;
	/*justify-content: space-around;*/
	flex-wrap: wrap;
}
.main-lest-item{
	width: 4.9865625rem;
	height: 7.09375rem;
	text-align: center;
}
.main-lest-item span{
	color: orangered;
	float: left;
	margin-left: 0.725rem;
	margin-top: 0.15625rem;
}

</style>